<template>
    <div class="tabBar">
        <div class="bar_box">
            <ul>
                <li @click="tohome">
                    <div class="img">
                        <img src="../assets/img/home.png" alt="" v-show="tabindex!=1">
                        <img src="../assets/img/yf.png" alt="" v-show="tabindex==1">
                    </div>
                    <p :class="{'con':tabindex==1}">首页</p>
                </li>
                 <li @click="tonote">
                    <div class="img">
                        <img src="../assets/img/kk.png" alt="" v-show="tabindex!=2">
                        <img src="../assets/img/WL.png" alt=""  v-show="tabindex==2" >
                    </div>
                    <p :class="{'con':tabindex==2}">手记</p>
                </li>
                 <li @click="tosearch">
                    <div class="img">
                        <img src="../assets/img/BL.png" alt="" v-show="tabindex!=3">
                        <img src="../assets/img/zE.png" alt=""  v-show="tabindex==3">
                    </div>
                    <p :class="{'con':tabindex==3}">搜索</p>
                </li>
                 <li @click="touser">
                    <div class="img">
                         <img src="../assets/img/hV.png" alt=""  v-show="tabindex!=4">
                         <img src="../assets/img/cN.png" alt=""  v-show="tabindex==4">
                    </div>
                    <p :class="{'con':tabindex==4}">我的</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tabindex:1,
                value:null,
            }
        },
        methods: {
            tohome(){
                this.tabindex=1;
               window.localStorage.setItem('tarindex',this.tabindex)
                this.$router.push({path:"/home",})
            },
            tonote(){
                this.tabindex=2;
                    window.localStorage.setItem('tarindex',this.tabindex)
                  this.$router.push({path:"/note",})
            },
            tosearch(){
                this.tabindex=3;
                    window.localStorage.setItem('tarindex',this.tabindex)
                 this.$router.push({path:"/search",})
            },
            touser(){
                this.tabindex=4;
                window.localStorage.setItem('tarindex',this.tabindex)
                 this.$router.push({path:"/user",})
            }
        },
        created() {
    this.value=window.localStorage.getItem("tarindex");
    if (!this.value==null) {
       return
    }else{
       this.value=1
    //    window.localStorage.setItem('tarindex',this.tabindex)
    }
  },
  watch:{
    'value':function () {
        this.tabindex=window.localStorage.getItem("tarindex")
        // console.log(this.index,this.value);
    }
  }
    }
</script>

<style lang="less">
 .tabBar{
    overflow-x: hidden;
     box-sizing: border-box;
    .bar_box{
         width:100%;
          overflow: hidden;
        box-sizing: border-box;
        position: fixed;
        bottom: 0;
        background-color: #fff;
            z-index: 50;
        ul{
            display: flex;
           
            li{
                width: 25%;
                .img{
                    display: flex;
                    img{
                        padding-top: 5px;
                        display: block;
                        width: 20px;
                        margin: 0 auto;
                    }
                }
                p{
                    text-align: center;
                    padding: 5px 0px;
                    font-size: 10px;
                    color: gray;
                    font-weight: 300;
                }
                .con{
                    color: black;
                    font-weight: 500;
                }
            }
        }
    }
 }
</style>